<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>云存储配置测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CDN__/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="__CDN__/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="__CDN__/assets/css/fastadmin.min.css">
    <style>
        .test-result { margin: 10px 0; padding: 10px; border-radius: 4px; }
        .test-success { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; }
        .test-error { background-color: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; }
        .test-info { background-color: #d1ecf1; border: 1px solid #bee5eb; color: #0c5460; }
        .config-item { margin-bottom: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
        .config-header { font-weight: bold; margin-bottom: 10px; }
        .config-details { font-size: 12px; color: #666; }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">云存储配置测试</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>配置列表</h4>
                                <div id="config-list">
                                    <!-- 配置列表将通过AJAX加载 -->
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h4>测试结果</h4>
                                <div id="test-results">
                                    <div class="test-info">请选择要测试的配置</div>
                                </div>
                                
                                <h4>上传测试</h4>
                                <div class="form-group">
                                    <label>选择文件：</label>
                                    <input type="file" id="test-file" class="form-control" accept="image/*,text/*">
                                </div>
                                <div class="form-group">
                                    <button type="button" id="test-upload" class="btn btn-primary" disabled>上传测试</button>
                                </div>
                                <div id="upload-result"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="__CDN__/assets/js/require.min.js" data-main="__CDN__/assets/js/require-backend{$Think.config.app_debug?'':'.min'}.js?v={$Think.config.site.version}"></script>
    <script>
        require(['jquery', 'bootstrap', 'backend', 'table', 'form'], function ($, undefined, Backend, Table, Form) {
            var Controller = {
                index: function () {
                    this.loadConfigs();
                    this.bindEvents();
                },
                
                loadConfigs: function() {
                    $.ajax({
                        url: 'yuncunchu/config/index',
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            if (data.rows && data.rows.length > 0) {
                                var html = '';
                                data.rows.forEach(function(config) {
                                    var statusClass = config.status == 1 ? 'text-success' : 'text-danger';
                                    var statusText = config.status == 1 ? '启用' : '禁用';
                                    var isDefaultText = config.is_default == 1 ? ' (默认)' : '';
                                    
                                    html += '<div class="config-item" data-id="' + config.id + '">';
                                    html += '<div class="config-header">' + config.name + isDefaultText + '</div>';
                                    html += '<div class="config-details">';
                                    html += '类型：' + config.type_text + '<br>';
                                    html += '状态：<span class="' + statusClass + '">' + statusText + '</span><br>';
                                    html += '创建时间：' + config.createtime;
                                    html += '</div>';
                                    if (config.status == 1) {
                                        html += '<button type="button" class="btn btn-sm btn-primary test-config" data-id="' + config.id + '">测试连接</button>';
                                    }
                                    html += '</div>';
                                });
                                $('#config-list').html(html);
                            } else {
                                $('#config-list').html('<div class="test-info">暂无配置</div>');
                            }
                        },
                        error: function() {
                            $('#config-list').html('<div class="test-error">加载配置失败</div>');
                        }
                    });
                },
                
                bindEvents: function() {
                    // 测试配置连接
                    $(document).on('click', '.test-config', function() {
                        var configId = $(this).data('id');
                        Controller.testConfig(configId);
                    });
                    
                    // 文件上传测试
                    $('#test-upload').on('click', function() {
                        var configId = $('.config-item.selected').data('id');
                        if (!configId) {
                            alert('请先选择要测试的配置');
                            return;
                        }
                        Controller.testUpload(configId);
                    });
                    
                    // 选择配置
                    $(document).on('click', '.config-item', function() {
                        $('.config-item').removeClass('selected');
                        $(this).addClass('selected');
                        $('#test-upload').prop('disabled', false);
                    });
                },
                
                testConfig: function(configId) {
                    $('#test-results').html('<div class="test-info">正在测试配置连接...</div>');
                    
                    $.ajax({
                        url: 'yuncunchu/config/test',
                        type: 'POST',
                        data: {id: configId},
                        dataType: 'json',
                        success: function(data) {
                            if (data.success) {
                                $('#test-results').html('<div class="test-success">' + data.message + '</div>');
                            } else {
                                $('#test-results').html('<div class="test-error">' + data.message + '</div>');
                            }
                        },
                        error: function() {
                            $('#test-results').html('<div class="test-error">测试失败，请检查网络连接</div>');
                        }
                    });
                },
                
                testUpload: function(configId) {
                    var fileInput = $('#test-file')[0];
                    if (!fileInput.files || fileInput.files.length === 0) {
                        alert('请选择要上传的文件');
                        return;
                    }
                    
                    var formData = new FormData();
                    formData.append('file', fileInput.files[0]);
                    formData.append('config_id', configId);
                    formData.append('module', 'admin');
                    formData.append('action', 'test');
                    
                    $('#upload-result').html('<div class="test-info">正在上传文件...</div>');
                    
                    $.ajax({
                        url: 'yuncunchu/upload/index',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: 'json',
                        success: function(data) {
                            if (data.success) {
                                var html = '<div class="test-success">';
                                html += '<strong>上传成功！</strong><br>';
                                html += '文件ID：' + data.data.file_id + '<br>';
                                html += '文件URL：<a href="' + data.data.file_url + '" target="_blank">' + data.data.file_url + '</a><br>';
                                html += '文件大小：' + (data.data.file_size / 1024).toFixed(2) + ' KB';
                                html += '</div>';
                                $('#upload-result').html(html);
                            } else {
                                $('#upload-result').html('<div class="test-error">上传失败：' + data.message + '</div>');
                            }
                        },
                        error: function() {
                            $('#upload-result').html('<div class="test-error">上传失败，请检查网络连接</div>');
                        }
                    });
                }
            };
            
            return Controller;
        });
    </script>
</body>
</html>
